<template>
    <div class="myinput">
        <label>{{label}}</label>:
        <input type="text" :value="modelValue" @input="iptChange">
        <slot></slot>
    </div>
</template>

<script>
export default {
    props: {
        label: String,
        modelValue: String
    },

    setup(props, { emit }) {
        function iptChange(e) {
            emit('update:modelValue', e.target.value)
        }

        return {
            iptChange
        }
    }
 }
</script>

<style scoped lang="scss">
.myinput {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
    label {
        width: 60px;
        flex-shrink: 0;
        font-size: 14px;
        text-align: justify;
        text-justify: inter-word;
        text-align-last: justify;
        color: #333;
        font-weight: 500;
    }
    input {
        outline: none;
        border: 1px solid #ccc;
        height: 30px;
        flex-shrink: 0;
        border-radius: 6px;
        margin-left: 5px;
        flex-shrink: 0;
    }
}
</style>